<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/goshppingCar.css">
</head>
<body>
    <div id="header">
        <div class="header-wrap">
            <div class="topbarfl">
                <li>
                    <div class="rightbox rightbox1">
                        <em>Hi、请</em><a class="border_none" href="./login.html">登录</a><a class="border_none"
                            href="./register.html">注册</a>
                    </div>
                    <div class="rightbox rightbox2">
                        <em>欢迎您：</em><span class="rightspan" class="border_none"></span><a class="border_none tclogin"
                            href="#">退出登录</a>
                    </div>
                </li>
            </div>
            <ul class="topbar-ul">
                <li>
                    <a href="#">购物车(<span>0</span>)件</a>
                </li>
                <li>
                    <a href="#">我的订单</a>
                </li>
                <li>
                    <a href="#">用户中心</a>
                </li>
                <li>
                    <a href="#">帮助</a>
                </li>
                <li>
                    <a class="topbar-ula" href="#">提建议</a>
                </li>
                <li>
                    <a href="#" class="topbar-ula">微博</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="content">
        <div class="content-wrap">
            <div class="car_tit">
                <h1>我的购物车</h1>
                <div class="shipping">
                    <b>单笔订单满100元免运费（香港、澳门、台湾、钓鱼岛地区和拆分订单除外）</b>
                </div>
                <a href="#">去结算</a>
                <a href="#">去结算跨境商品</a>
            </div>
            <!-- 已添加购物车的商品 -->
            <div class="orderInfo">
                <div class="carList">
                    <table class="car_box border=" 0" ;cellspacing="0" cellpadding="0" rules="all" rules="groups"
                        style="text-align: center; color: #666; font-size: 12px;">
                        <thead>
                            <th class="check_all" width="10%"><input type="checkbox" name="" id="cbx"> 全选</th>
                            <th class="cb_r1" width="30%">商品</th>
                            <th class="cb_r2" width="10%">单价</th>
                            <th class="cb_r3" width="10%">优惠</th>
                            <th class="cb_r4" width="15%">数量</th>
                            <th class="cb_r5" width="15%">小计</th>
                            <th class="cb_r6" width="10%">操作</th>
                        </thead>
                        <tbody id="car_goods">
                            <!-- <tr>
                                <td><input type="checkbox" name="" id=""></td>
                                <td><img style="float: left;" src="./images/carshoop.jps" alt=""><a
                                        style="float: left; line-height: 50px; font-size: 12px; color:#0066cc;"
                                        href="#">43度 茅台飞天 400ml</a></td>
                                <td>429</td>
                                <td style="color: #FF0000">-</td>
                                <td>
                                    <button id="jianCar" class="jian_car"style="margin-left: 30px;float: left;">-</button>
                                    <input value="1" class="countNum"style="text-align:center;font-size: 15px;width: 37px;margin: 0px 3px;color: #666;float: left;">
                                    <button id="addCar" class="add_car"
                                        style="float: left;">+</button>
                                </td>
                                <td style="text-align: center;color:#CA0809;font-size:12px;">429</td>
                                <td style="width:100px">
                                    <a href="#" style="color: #666;font-size: 12px;margin-right: 10px;">收藏</a>
                                    <a class="delBtn" href="#" style="color: #666;font-size: 12px;">删除</a>
                                </td>
                            </tr> -->
                            <!-- <tr>
                                <td><input type="checkbox" name="" id=""></td>
                                <td><img style="float: left;" src="./images/carshoop.jps" alt=""><a
                                        style="float: left; line-height: 50px;color:#0066cc;"
                                        href="#">43度 茅台飞天 400ml</a></td>
                                <td>739</td>
                                <td style="color: #FF0000;">-</td>
                                <td val style=" text-align: center;">
                                    <button id="jianCar" class="jian_car"
                                        style="margin-left: 30px;float: left;">-</button>
                                    <input value="1" class="countNum"
                                        style="text-align: center;font-size: 15px;width: 37px;margin: 0px 3px;color: #666;float: left;">
                                    <button id="addCar" class="add_car"
                                        style="float: left;">+</button>
                                </td>
                                <td style="color:#CA0809;">739</td>
                                <td>
                                    <a href="#" style="margin-right: 10px;">收藏</a>
                                    <a href="#" class="delBtn" style="color: #666;font-size: 12px;">删除</a>
                                </td>
                            </tr> -->
                        </tbody>
                        <tfoot class="car_info" id="car_info">
                            <tr>
                                <td colspan="8" style="text-align: center">
                                    <li>电子券在“去结算”页面中使用</li>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="1" style="text-align: center" class="btn_all"><input type="checkbox"
                                        name="" id="cbx2">全选</td>
                                <td colspan="1" class="deletePro"><a class="delBtn1" href="#">删除选中商品</a></td>
                                <td colspan="1" class="clearPro"><a class="delBtn2" href="#">清空购物车</a></td>
                                <td colspan="4" style="text-align: center;">
                                    <p>应付商品金额:￥<span id="totalPrice" style="color: #c40000; font-size: 20px;">0</span>
                                    </p>
                                    <p>跨境商品总金额：￥<b style="color: #c40000">0.00</b></p>
                                    <p>普通商品总金额：￥<b style="color: #c40000">0</b></p>
                                </td>

                            </tr>
                        </tfoot>
                    </table>

                    <div class="car-btn">
                        <a href="./index.html" class="gono_btn">继续购物</a>
                        <span class="fl_tip">继续购物商品价格和库存请以订单提交时为准</span>
                        <a href="#" class="car_btn02">去结算</a>
                        <a href="#" class="car_btn01">去结算跨境商品</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div id="trinket">
        <dl class="trinket_box">
            <dt>
                <span>你可能还需要</span>
            </dt>
            <dd>
                <ul>
                    <li class="trinket_li1"><img src="./images/goshoppingCarxy01.jpg" alt=""></li>
                    <li class="trinket_li2"><a href="#">43度 茅台飞天酒（带杯）（ 2019年产）</a></li>
                    <li class="trinket_li3">￥999</li>
                    <li class="trinket_li4"><a href="#">放入购物车</a></li>
                </ul>
                <ul>
                    <li class="trinket_li1"><img src="./images/goshoppingCarxy01.jpg" alt=""></li>
                    <li class="trinket_li2"><a href="#">43度 茅台飞天酒（带杯）（ 2019年产）</a></li>
                    <li class="trinket_li3">￥999</li>
                    <li class="trinket_li4"><a href="#">放入购物车</a></li>
                </ul>
                <ul>
                    <li class="trinket_li1"><img src="./images/goshoppingCarxy01.jpg" alt=""></li>
                    <li class="trinket_li2"><a href="#">43度 茅台飞天酒（带杯）（ 2019年产）</a></li>
                    <li class="trinket_li3">￥999</li>
                    <li class="trinket_li4"><a href="#">放入购物车</a></li>
                </ul>
                <ul>
                    <li class="trinket_li1"><img src="./images/goshoppingCarxy01.jpg" alt=""></li>
                    <li class="trinket_li2"><a href="#">43度 茅台飞天酒（带杯）（ 2019年产）</a></li>
                    <li class="trinket_li3">￥999</li>
                    <li class="trinket_li4"><a href="#">放入购物车</a></li>
                </ul>
                <ul>
                    <li class="trinket_li1"><img src="./images/goshoppingCarxy01.jpg" alt=""></li>
                    <li class="trinket_li2"><a href="#">43度 茅台飞天酒（带杯）（ 2019年产）</a></li>
                    <li class="trinket_li3">￥999</li>
                    <li class="trinket_li4"><a href="#">放入购物车</a></li>
                </ul>
                <ul class="border_right1">
                    <li class="trinket_li1"><img src="./images/goshoppingCarxy01.jpg" alt=""></li>
                    <li class="trinket_li2"><a href="#">43度 茅台飞天酒（带杯）（ 2019年产）</a></li>
                    <li class="trinket_li3">￥999</li>
                    <li class="trinket_li4"><a href="#">放入购物车</a></li>
                </ul>
                <ul>
                    <li class="trinket_li1"><img src="./images/goshoppingCarxy01.jpg" alt=""></li>
                    <li class="trinket_li2"><a href="#">43度 茅台飞天酒（带杯）（ 2019年产）</a></li>
                    <li class="trinket_li3">￥999</li>
                    <li class="trinket_li4"><a href="#">放入购物车</a></li>
                </ul>
                <ul>
                    <li class="trinket_li1"><img src="./images/goshoppingCarxy01.jpg" alt=""></li>
                    <li class="trinket_li2"><a href="#">43度 茅台飞天酒（带杯）（ 2019年产）</a></li>
                    <li class="trinket_li3">￥999</li>
                    <li class="trinket_li4"><a href="#">放入购物车</a></li>
                </ul>
                <ul>
                    <li class="trinket_li1"><img src="./images/goshoppingCarxy01.jpg" alt=""></li>
                    <li class="trinket_li2"><a href="#">43度 茅台飞天酒（带杯）（ 2019年产）</a></li>
                    <li class="trinket_li3">￥999</li>
                    <li class="trinket_li4"><a href="#">放入购物车</a></li>
                </ul>
                <ul>
                    <li class="trinket_li1"><img src="./images/goshoppingCarxy01.jpg" alt=""></li>
                    <li class="trinket_li2"><a href="#">43度 茅台飞天酒（带杯）（ 2019年产）</a></li>
                    <li class="trinket_li3">￥999</li>
                    <li class="trinket_li4"><a href="#">放入购物车</a></li>
                </ul>
                <ul>
                    <li class="trinket_li1"><img src="./images/goshoppingCarxy01.jpg" alt=""></li>
                    <li class="trinket_li2"><a href="#">43度 茅台飞天酒（带杯）（ 2019年产）</a></li>
                    <li class="trinket_li3">￥999</li>
                    <li class="trinket_li4"><a href="#">放入购物车</a></li>
                </ul>
                <ul class="border_right1">
                    <li class="trinket_li1"><img src="./images/goshoppingCarxy01.jpg" alt=""></li>
                    <li class="trinket_li2"><a href="#">43度 茅台飞天酒（带杯）（ 2019年产）</a></li>
                    <li class="trinket_li3">￥999</li>
                    <li class="trinket_li4"><a href="#">放入购物车</a></li>
                </ul>
            </dd>
        </dl>
    </div>
    <div id="footer">
        <div class="footer-wrap">
            <img src="./images/goshoppingCar_jpg.jpg" alt="">
            <div class="links">
                <li><a href="#">关于我们</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">关于我们</a></li>
            </div>
            <div class="banquan">
                Copyright©2009-2020 gjw.com, All Rights Reserved 购酒网(上海)供应链管理有限公司 版权所有
            </div>
            <div class="authentication">
                <a href="#" class="authentication01"></a>
                <a href="#" class="authentication02"></a>
            </div>
        </div>
    </div>


    <!-- <div class="footer"></div>-->
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/layer/layer.js"></script>
    <script src="./js/goshoppingCar.js"></script>
</body>

</html>
<script>
    // $(function () {
    //     // console.log($(".rightbox1"))
    //     // $(".rightbox1")
    //     if (!JSON.parse(localStorage.getItem("user"))) {
    //         $(".rightbox1").show().siblings().hide();
    //     } else {
    //         $(".rightbox1").hide().siblings().show();
    //         console.log(JSON.parse(localStorage.getItem("user")));
    //         let data = JSON.parse(localStorage.getItem("user"));
    //         // console.log($(".rightspan"));
    //         // console.log(data.name);
    //         $(".rightspan").html(data.uName);
    //         console.log($(".tclogin"));
    //         $(".tclogin").on("click",function(){
    //             console.log("111");
    //             localStorage.clear();
    //         })

    //     }
    // })



    // function AddJian() {
    //     jQuery.fn.extend({
    //         // 参数：
    //         // $subCheck：子复选框
    //         // $unBtn:反选按钮
    //         check: function ($subCheck, $unBtn) {
    //             //1、 点击全选复选框
    //             this.click(function () {
    //                 $subCheck.prop("checked", this.checked);
    //             });
    //             if ($unBtn) {
    //                 // 点击反选按钮
    //                 $unBtn.click(function () {
    //                     $subCheck.each(function () {
    //                         // this: 循环时的当前元素
    //                         this.checked = !this.checked;
    //                     });
    //                     subChangeFather();
    //                 });
    //             }
    //             // 点击子复选框
    //             $subCheck.click(function () {
    //                 subChangeFather();
    //             })

    //             var subChangeFather = () => {
    //                 // 循环所有的复选框，看看是不是都选中了呢
    //                 let allCheck = true;//假定都选中了
    //                 $subCheck.each(function () {
    //                     // this:循环时的当前dom对象。
    //                     if (this.checked != true) {
    //                         allCheck = false;
    //                     }
    //                 });
    //                 this.prop("checked", allCheck);
    //             }
    //         }
    //     });

    //     $(function () {

    //         $("table :checkbox:eq(0)").check($("table :checkbox:gt(0)"));
    //         $("table :checkbox:last").check($("table :checkbox"));
    //         // console.log($(":checkbox"))
    //         $(":checkbox").click(function () {
    //             // 总数量
    //             // Count();
    //             totalMoney();
    //         });

    //         // input框
    //         $("tbody tr td").find(".countNum").on("input", function () {
    //             // console.log($(this));

    //             let count = $(this).val();
    //             if (count <= 0 && count != null) {
    //                 alert("输入有误")
    //                 // return count=1;
    //             }
    //             let price = $(this).parent().prev().prev().text();
    //             $(this).parent().next().text(price * count).css({ "color": "#C40000", "font-size": "12px" })
    //             // 总数量
    //             Count();
    //             totalMoney();
    //         })


    //         // 加
    //         $(".add_car").on("click", function () {
    //             // 数量
    //             let count = $(this).prev().val();
    //             // console.log(count);
    //             count++;
    //             $(this).prev().val(count);
    //             // 单价
    //             let price = $(this).parent().prev().prev().html();
    //             //计算金额
    //             let money = price * count;
    //             $(this).parent().next().html(money).css({ "color": "#C40000", "font-size": "12px" });

    //             Count();
    //             //总金额
    //             totalMoney();
    //         })

    //         //减
    //         $(".jian_car").on("click", function () {
    //             //数量
    //             let count = $(this).next().val();
    //             count--;
    //             if (count <= 1) {
    //                 count = 1;
    //             }
    //             $(this).next().val(count);
    //             //单价
    //             let price = $(this).parent().prev().prev().html();
    //             //计算金额
    //             let money = price * count;
    //             $(this).parent().next().html(money).css({ "color": "#C40000", "font-size": "12px" });
    //             // 总数量
    //             Count();
    //             // 总金额
    //             totalMoney();
    //         });

    //         $(".delBtn").on("click", function () {
    //             var thiss = $(this);
    //             if (!confirm("您好，您确定要从购物车中删除该商品吗？")) {
    //                 return;
    //             }
    //             var cid = $(this).data("info");
    //             console.log(cid);

    //             $.ajax({
    //                 url: "./api/delete",
    //                 headers: {
    //                     token: localStorage.getItem("token")
    //                 },
    //                 type: "post",
    //                 data: {
    //                     cid
    //                 }
    //             }).then(function (res) {
    //                 layer.alert(res.msg);
    //                 //数据库里 数据真删除后, 删除页面效果

    //                 $(thiss).parents("tr").remove();
    //             })
    //             // $(this).parent().parent().remove();
    //             Count();
    //             totalMoney();

    //         });
    //         $(".delBtn1").on("click", function () {
    //             // $("table :checkbox:eq(0)").check($("table :checkbox:gt(0)"));
    //             if (confirm("您好，您确定要清空购物车吗？")) {
    //                 return;
    //             }
    //             $(this).parent().parent().parent().parent().find("tr:gt(0)").not("tr:last").remove();
    //             Count()
    //             totalMoney();

    //         });
    //         $(".delBtn2").on("click", function () {
    //             if (!confirm("您好，您确定要清空购物车吗？")) {
    //                 return;
    //             }
    //             $(this).parent().parent().parent().parent().find("tr:gt(0)").not("tr:last").remove();
    //             Count();
    //             totalMoney();
    //         });

    //     })
    //     // console.log($("table tr:last").find("span"));
    //     function totalMoney() {
    //         let money = 0;
    //         let $tr = $("table tr:gt(0)").not("table tr:last");
    //         $tr.each(function () {
    //             //复选框是不是都选中了
    //             // console.log($(this).find("td").eq(5).children("b").text());
    //             if ($(this).find(":checkbox").prop("checked")) {
    //                 money += parseInt($(this).find("td").eq(5).html());
    //             }
    //             // console.log(money);
    //         })
    //         // console.log(money);
    //         $("table tr:last").find("span").html(money);
    //     }

    //     function Count() {
    //         let count = 0;
    //         let $tr = $("table tbody tr");
    //         // console.log($tr)
    //         $tr.each(function () {
    //             count += parseInt($(this).find(".countNum").val());
    //         })
    //         $("#header .topbar-ul").find("span").text(count);
    //     }

    // }
    // $(function () {
    //     $.ajax({
    //         url: "./api/getCart",
    //         headers: {
    //             token: localStorage.getItem("token")
    //         },
    //         type: "post",
    //         data: {
    //             uid: JSON.parse(localStorage.getItem("user")).uId
    //         }
    //     }).then(function (res) {
    //         console.log(res)
    //         var htmlStr = ``;
    //         [...res.data].forEach(function (el) {
    //             htmlStr += `<tr>`;
    //             htmlStr += `
    //                         <td><input type="checkbox" name="" id=""></td>
    //                         <td><img style="float: left; display:block;width:50px;height:50px;" src="${el.gXiaoimg}" alt=""><a
    //                                 style="float: left; line-height: 50px; font-size: 12px; color:#0066cc;"
    //                                 href="#">${el.gName} 400ml</a></td>
    //                         <td>${el.gPrice}</td>
    //                         <td style="color: #FF0000">-</td>
    //                         <td>
    //                             <button id="jianCar" class="jian_car"style="margin-left: 30px;float: left;">-</button>
    //                             <input value="${el.gNumer}" class="countNum"style="text-align:center;font-size: 15px;width: 37px;margin: 0px 3px;color: #666;float: left;">
    //                             <button id="addCar" class="add_car"
    //                                 style="float: left;">+</button>
    //                         </td>
    //                             <td style="text-align: center;color:#CA0809;font-size:12px;">${el.gTotal}</td>
    //                             <td style="width:100px">
    //                                 <a href="#" style="color: #666;font-size: 12px;margin-right: 10px;">收藏</a>
    //                                 <a class="delBtn" data-info=${el.cid} href="#" style="color: #666;font-size: 12px;">删除</a>
    //                             </td>
    //             `;
    //             htmlStr += `</tr>`;
    //         })

    //         $("table tbody").html(htmlStr);
    //         AddJian();
    //         (function Count() {
    //             let count = 0;
    //             let $tr = $("table tbody tr");
    //             console.log($tr)
    //             $tr.each(function () {
    //                 count += parseInt($(this).find(".countNum").val());
    //             })
    //             $("#header .topbar-ul").find("span").text(count);
    //         })();

    //     })
    // })
    {   // $("table tbody").on("click", ".delBtn", function () {
        //     var thiss = $(this);

        //     if (!confirm("您确定要删除吗")) {
        //         return;
        //     }

        //     var cid = $(this).data("info");
        //     console.log(cid);

        //     $.ajax({
        //         url: "./api/delete",
        //         type: "post",
        //         data: {
        //             cid
        //         }
        //     }).then(function (res) {
        //         alert(res.msg);
        //         //数据库里 数据真删除后, 删除页面效果

        //         $(thiss).parents("tr").remove();
        //     })
        // })

        // //减法
        // $("#tab").on("click", ".jian", function () {
        //     var num = $(this).next('.num').val();
        //     if (num <= 1) {
        //         return;
        //     }
        //     num--;
        //     $(this).next('.num').val(num);

        //     var price = $(this).parents("tr").children("td").eq(2).text()
        //     $(this).parents("tr").children("td").eq(4).text(price * num)



        //     var cid = $(this).data("info");
        //     $.ajax({
        //         url: "./api/changeCartNuM",
        //         type: 'post',
        //         data: {
        //             cid,
        //             gnumer: num
        //         }
        //     }).then(function (res) {
        //         alert(res.msg);
        //     })


        // });
        // //加法
        // $("#tab").on("click", ".jia", function () {
        //     var num = $(this).prev('.num').val();
        //     num++;
        //     $(this).prev('.num').val(num);
        //     var price = $(this).parents("tr").children("td").eq(2).text()
        //     $(this).parents("tr").children("td").eq(4).text(price * num);

        //     var cid = $(this).data("info");
        //     $.ajax({
        //         url: "./api/changeCartNuM",
        //         type: 'post',
        //         data: {
        //             cid,
        //             gnumer: num
        //         }
        //     }).then(function (res) {
        //         alert(res.msg);
        //     })
        // })


        // $("#tab").on("click", ".del", function () {

        //     var self = this;
        //     if (!confirm("确定要删除吗")) {
        //         return;
        //     }

        //     var cid = $(this).data("info");
        //     console.log(cid);

        //     $.ajax({
        //         url: "./api/delete",
        //         type: "post",
        //         data: {
        //             cid
        //         }
        //     }).then(function (res) {
        //         alert(res.msg);
        //         //数据库里 数据真删除后, 删除页面效果

        //         $(self).parents("tr").remove();
        //     })
        // })}  
    }


</script>